<style lang='scss'>
    .wrap .el-input.is-disabled .el-input__inner {
        text-align: center;
    }
</style>
<template>
    <div>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters" ref="filters" :rules="rule">
                <el-form-item prop="date">
                    <el-date-picker
                        v-model="filters.date"
                        range-separator="至"
                        type="datetimerange"
                        placeholder="选择时间范围">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="open('SET')">返利特权设置</el-button>
                </el-form-item>
                <el-form-item label="搜索关键字" prop="input">
                    <el-input  v-model="filters.input" placeholder="用户ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">查找</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="dataList">
                <el-table-column label="用户ID" align="center" min-width="140" prop="userId"></el-table-column>
                <el-table-column label="用户昵称" align="center" min-width="140" prop="userNickName"></el-table-column>
                <el-table-column label="返利金额" align="center" min-width="140" prop="amount"></el-table-column>
                <el-table-column label="返利类型" align="center" min-width="140">
                    <template slot-scope="scope">
                        <span style="color: red;margin-right: 5px">{{scope.row.showYearAndMonth}}</span><span>{{scope.row.type}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="返利时间" align="center" min-width="140" prop="createTime"></el-table-column>
                <el-table-column label="操作" align="center" min-width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="open('CHECK',scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--工具条-->
            <div class="toolbar" style="display: flex;justify-content: flex-end;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-col>
        <el-dialog :title="this.type == 1 ? '返利特权设置' : this.type == 2 ? '详情' : ''" :visible.sync="dialogWithdrawSet" size="tiny">
            <div v-if="this.type == 1">
                <el-form :model="setForm" ref="setForm" :rules="setFormRule">
                    <el-form-item label="可用余额>=" label-width="100px" prop="lowMoney">
                        <el-input placeholder="输入正整数" v-model="setForm.lowMoney">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="this.type == 2" class="wrap">
                <el-form :model="infoForm" ref="infoForm" label-width="100px">
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="用户ID">
                                <el-input v-model="infoForm.id" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="用户姓名">
                                <el-input v-model="infoForm.nickname" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="会员卡号">
                                <el-input v-model="infoForm.memberCard" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="可返利(元)">
                                <el-input v-model="infoForm.canRebateBalance" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="已返利(元)">
                                <el-input v-model="infoForm.alreadyRebateBalance" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户昵称">
                                <el-input v-model="infoForm.nickname" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="会员级别">
                                <el-input v-model="infoForm.level" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="返利总消费">
                                <el-input v-model="infoForm.totalConsumeAmount" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="待返利(元)">
                                <el-input v-model="infoForm.waitRebateBalance" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="剩余消费(元)">
                                <el-input v-model="infoForm.remainConsumeAmount" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" v-if="this.type == 1">
                <el-button type="primary" @click="setSubmit('setForm')">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import { getRebateList, setRebate, readRebate, rebateInfo } from '@/api/api'
    export default {
        data() {
	        let validateNumber = (rule, value, callback) => {
		        if (!value) {
			        callback(new Error('不能为空'));
		        } else if(!Number.isInteger(Number(value))) {
			        callback(new Error('输入正整数'));
		        } else {
			        callback();
		        }
	        };
            return {
	            filters: {
		            date: '',
                    input: '',
                },
                start: '',
                end: '',
	            rule: {},
	            dataList: [],
	            total: 0,
	            size: 10,
	            currentPage: 1,
	            
	            dialogWithdrawSet: false,
	            type: 0,
	            setForm: {
		            lowMoney: ''
                },
	            setFormRule: {
		            lowMoney: [
			            {validator: validateNumber, trigger: 'blur' }
		            ],
                },
	            infoForm: {
	            	name: '123123123'
                }
            }
        },
        methods: {
	        getTime() {
		        let starttime,endtime = ''
		        let time = this.filters.date;
		        if(!time[0] == '') {
			        starttime = this.moment(time[0]).format();
		        }
		        if(!time[1] == '') {
			        endtime = this.moment(time[1]).format();
		        }
		        if(starttime == "Invalid date"){
			        starttime="";
		        };
		        if(endtime == "Invalid date"){
			        endtime="";
		        };
		        this.start = starttime
		        this.end = endtime
	        },
	        getList() {
		        this.getTime();
		        let para = {
			        pageIndex: this.currentPage,
			        pageSize: this.size,
		        };
		        if(!this.start == '') {
			        para.startTime = this.start
		        }
		        if(!this.end == '') {
			        para.endTime = this.end
		        }
		        if(!this.filters.input == '') {
			        para.userId = this.filters.input.replace(/\s/g, "")
		        }
		        getRebateList(para).then(res => {
			        this.dataList = res.data.data;
			        this.dataList.map(v => {
				        v.createTime = this.moment(v.createTime).format('YYYY-MM-DD HH:mm:ss')
			        })
			        this.total = res.data.totalCount;
                })
            },
	        open() {
                let type = arguments[0]
	        	if(type === 'SET') {
	        		this.type = 1;
	        		this.dialogWithdrawSet = true
			        readRebate({}).then(res => {
			        	this.setForm.lowMoney = res.data.rebateLimit
                    })
                }
                if(type === 'CHECK') {
	                let row = arguments[2]
	                this.type = 2;
	                this.dialogWithdrawSet = true
                    let para = {
	                    userId: row.userId
                    }
	                rebateInfo(para).then(res => {
	                	console.log(res)
                        this.infoForm = Object.assign({},res.data)
                    })
                }
            },
	        setSubmit(setForm) {
	        	if(this.type == 1) {
			        this.$refs[setForm].validate((valid) => {
				        if(valid) {
					        let para = {
						        rebateLimit: this.setForm.lowMoney,
					        }
					        this.dialogWithdrawSet = false
					        setRebate(para).then(res => {
						        this.$message({
							        message: '设置成功',
							        type: 'success'
						        });
						        this.dialogWithdrawSet = false
					        })
				        }
			        })
                }
            },
	        // 分页详情
	        handleSizeChange(val) {
		        this.size = val;
		        this.getList();
	        },
	        handleCurrentChange(val) {
		        this.currentPage = val;
		        this.getList();
	        },
        },
	    mounted() {
		    this.getList();
	    }
    }
</script>


